<template>
    <div class="login_cont">
        <div class="header-login">
            <p class="hea">账号密码登录</p>
            <el-form
                class="form"
                :model="form"
                :rules="rules"
                ref="form"
                @keyup.native.enter="submit('form')"
            >
                <el-form-item prop="username">
                    <el-input class="input" placeholder="请输入账号" v-model="form.username" clearable></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        class="input"
                        type="password"
                        placeholder="请输入密码"
                        v-model="form.password"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        class="button"
                        type="primary"
                        :loading="loading"
                        @click="submit('form')"
                    >登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Service from "../../services/main";
import md5 from "js-md5";
import { $local } from "../../assets/utils/utils";
export default {
    name: "login",
    data() {
        return {
            form: {
                username: "",
                password: ""
            },
            loading: false
        };
    },
    computed: {
        rules() {
            return {
                username: [
                    { required: true, message: "请输入账号", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            };
        }
    },
    methods: {
        submit(formName) {
            this.$refs[formName].validate(valid => {
                this.loading = true;
                const params = {
                    ...this.form,
                    password: md5(this.form.password)
                };

                if (valid) {
                    Service.login(this, params)
                        .then(res => {
                            this.loading = false;
                            if (res.errorMsg === "success") {
                                this.$notify({
                                    title: "提示",
                                    message: "登陆成功！",
                                    type: "success"
                                });
                                $local("userInfo", res.result);
                                this.$router.push("/home");
                            } else {
                                this.$notify({
                                    title: "警告",
                                    message: res.errorMsg,
                                    type: "warning"
                                });
                            }
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                } else {
                    console.log("error submit");
                    this.loading = false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.login_cont {
    width: 100%;
    height: 100%;
    background: url("https://pan.baidu.com/static/images/16new/bg2.jpg")
        no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.header-login {
    width: 350px;
    height: 350px;
    background: #ffffff;
    border-radius: 5px;
    position: absolute;
    right: 150px;
    top: 25%;
}
.login_input {
    display: flex;
    width: 90%;
    padding-left: 40px;
    align-items: center;
}
.login_input span {
    display: block;
    width: 100px;
}
.pass-form-logo {
    font-size: 20px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-weight: 100;
    color: #333;
    background: 0;
    margin-left: 0;
}
.hea {
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #333;
    font-size: 18px;
}
.form {
    padding-left: 20px;
}
.form .input {
    width: 310px;
}
.form .button {
    width: 310px;
}
</style>
